:root {
  --One-color: #8ecae6; /*skyblue Colour*/
  --two-color: #219ebc;/*light skyblue Colour*/
  --three-color: #023047;/*Black shade  Colour*/
  --four-color: #ffb703;/*yellow Colour*/
  --five-color: #fb8501;/*orange Colour*/

  --white: #ffffff;
  --black: #000000;
}
.hero {
  position: relative;
  /*height:1000px;  */
  display: flex;
  justify-content: center;
  align-items: center;
  overflow: hidden;
  color: white;
  text-align: center;
}

.hero-content {
  position: relative;
  z-index: 2;
}

.hero-content h1 {
  font-size: 3rem;
}

.highlight {
  font-size: 1.5rem;
  color: var(--four-color); /* Yellow */
  font-weight: bold;
}

.hero_index_btn{
  display: inline-block;
  margin-top: 1rem;
  padding: 12px 25px;
  background: var(--five-color); /* Orange */
  color: white;
  text-decoration: none;
  border-radius: 6px;
  font-weight: bold;
  transition: background 0.3s;
}

.hero_index_btn:hover {
  background: var(--four-color); /* Yellow on hover */
}

.wave {
  position: relative;
  bottom: -1px;
}

.wave path {
  animation: waveAnim 3s ease-in-out infinite alternate;
}

@keyframes waveAnim {
  0% { d: path("M0,192L80,202.7C160,213,320,235,480,218.7C640,203,800,149,960,144C1120,139,1280,181,1360,202.7L1440,224V320H0Z"); }
  100% { d: path("M0,160L80,180C160,200,320,220,480,200C640,180,800,140,960,160C1120,180,1280,200,1360,210L1440,220V320H0Z"); }
}